<template>
  <div>
    <div v-for="(panel, i) in panelList" :key="i" shadow="hover" class="panel">
      <div style="display: flex; justify-content: center">
        <span v-if="!showOperation" style="color: rgba(255, 255, 255, 0.8);font-size:14px">{{ panel.panelTitle
            }}</span>
        <el-dropdown @command="dropdownSelect" v-else>
          <span class="el-dropdown-link"
            >{{ panel.panelTitle
            }}<i class="el-icon-arrow-down el-icon--right"></i
          ></span>
          <el-dropdown-menu slot="dropdown">
             <el-dropdown-item
              icon="el-icon-refresh"
              :command="{ id: panel.panelId, type: 'refresh' }"
              >更新面板</el-dropdown-item
            >
            <el-dropdown-item
              icon="el-icon-delete"
              :command="{ id: panel.panelId, type: 'delete' }"
              >删除面板</el-dropdown-item
            >
             <el-dropdown-item
              icon="el-icon-edit"
              :command="{ id: panel.panelId, type: 'edit' }"
              >编辑图表</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-carousel trigger="click" height="calc((100vh - 154px)/3)">
        <el-carousel-item
          v-for="chartId in Object.keys(panelChartInfo[panel.panelId] || {})"
          :key="chartId"
        >
          <panel-chart
            :chartInfo="panelChartInfo[panel.panelId][chartId]"
            :showData="chartShowDataInfo[`${panel.panelId}/${chartId}`]"
          ></panel-chart>
        </el-carousel-item>
      </el-carousel>
      <!-- <div
        v-for="chartId in Object.keys(panelChartInfo[panel.panelId] || {})"
        :key="chartId"
      >
        <panel-chart
          :chartInfo="panelChartInfo[panel.panelId][chartId]"
          :showData="chartShowDataInfo[`${panel.panelId}/${chartId}`]"
        ></panel-chart>
      </div> -->
    </div>
  </div>
</template>
<script>
import panelChart from "./chart/chart.vue";

export default {
  props: {
    panelList: {
      type: Array,
      default: () => [],
    },
    panelChartInfo: {
      type: Object,
      default: () => {},
    },
    chartShowDataInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    panelChart,
  },
  data() {
    return {
      user: "",
       roleId:'1',
       showOperation:true,
    };
  },
  computed: {},
  created() {
    this.getUserInfo();
  },
  mounted() {},
  watch: {
     "$store.state.user":{
      handler(val){
        this.user = val;
        this.roleId = val.role.roleId;
      },
      deep:true,
    },
     roleId:{
      handler(val){
        if(val != '0'){
          this.showOperation = true;
        }else{
          this.showOperation = false;
        }
      }
    }
  },
  methods: {
    dropdownSelect(data) {
      this.$emit("dropdownSelect", data);
    },
     getUserInfo() {
      let ts = this;
      ts.$http({
        method: "GET",
        url: ts.portInterface.getUserInfo,
        params: {
          userId: localStorage.getItem("userId"),
        },
      })
        .then((response) => {
          if (response.data.code == 200) {
            this.$store.commit("setUserInfo", response.data.result);
            this.user = response.data.result;
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>

/deep/.el-dropdown {
  color: rgba(255, 255, 255, 0.8);
}
/deep/.el-table {
  color: rgba(255, 255, 255, 0.6);
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgb(49 140 212);
}
</style>
